<template>
  <!-- 签约管理 * 待签约列表 -->
  <div>
    <div class="content_publish_top_One">
      <!-- 第一行 - 签约  -->
      <div style="border-bottom: 1px dashed #efefef" class="content_One">
        <div class="display">
          <b class="content_b">服务状态</b>
          <el-select
            style="margin-right: 15px; width: 170px"
            v-model="value"
            class="m-2"
            placeholder="请选择服务状态"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="display">
          <b class="content_b">签约机构</b>
          <el-select
            style="margin-right: 15px; width: 170px"
            v-model="value"
            class="m-2"
            placeholder="请选择签约机构"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="display">
          <b class="content_b">医生团队</b>
          <el-select
            style="margin-right: 15px; width: 170px"
            v-model="value"
            class="m-2"
            placeholder="请选择医生团队"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="display">
          <b class="content_b">服务包</b>
          <el-select
            style="margin-right: 15px; width: 170px"
            v-model="value"
            class="m-2"
            placeholder="请选择服务包"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <!-- 第二行 - 选择日期 -->
      <div class="content_One">
        <b class="content_b">预约日期</b>
        <div class="display">
          <el-select
            style="margin-right: 15px; width: 430px"
            v-model="value"
            class="m-2"
            placeholder="请选择时间"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="display">
          <el-button
            type="primary"
            color="#18C4B4"
            style="color: #fff"
            @click="dialogVisible = true"
            >新增服务</el-button
          >
          <el-button type="primary">查询</el-button>
          <el-button>导出</el-button>
        </div>
      </div>

      <!-- table表格 -->
      <el-table
        :data="ebooks1.books.slice((pages - 1) * pageSize, pages * pageSize)"
        style="width: 100%"
      >
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column type="index" label="编号" width="55">
        </el-table-column>
        <el-table-column property="name" label="姓名" width="120" />
        <el-table-column property="ID" label="身份证号" show-overflow-tooltip />
        <el-table-column property="mobile" label="手机号" width="120" />

        <el-table-column property="serve.name" label="服务包" width="120" />

        <el-table-column property="project.name" label="服务项目" width="120" />
        <el-table-column property="team.name" label="服务医生" width="120" />
        <el-table-column property="state" label="签约状态" width="120">
          <template #default="scope">
            <el-tag v-if="scope.row.state" type="success">已签约</el-tag>
            <el-tag v-else type="danger">未签约</el-tag>
          </template>
        </el-table-column>

        <el-table-column property="time" label="申请时间" width="120" />

        <el-table-column label="操作" width="120">
          <a style="margin-right: 10px">查询详情</a>
          <a>编辑</a>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="margin-top: 15px">
        <el-pagination
          @update:current-page="changePage"
          v-model:current-page="page"
          background
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="ebooks1.books.length"
        />
      </div>
    </div>

    <!-- 新增服务弹出框 -->
    <el-dialog
      v-model="dialogVisible"
      title="新增服务信息"
      width="50%"
      :before-close="handleClose"
    >
      <div class="dialog_info">
        <h1>居民信息</h1>
        <el-form :model="form">
          <el-form-item label="身份证号码" :label-width="formLabelWidth">
            <el-input v-model="input2" class="w-50 m-2" placeholder="请输入身份证号" />
          </el-form-item>
          <el-form-item label="选择居民" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="选择居民">
              <el-option label="Zone No.1" value="shanghai" />
              <el-option label="Zone No.2" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="请选择出生年月" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择出生年月">
              <el-option label="Zone No.1" value="shanghai" />
              <el-option label="Zone No.2" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="请输入联系电话" :label-width="formLabelWidth">
            <el-input
              v-model="form.name"
              autocomplete="off"
              placeholder="请输入身份证号"
            />
          </el-form-item>
          <el-form-item label="请选择居民标签" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择居民标签">
              <el-option label="Zone No.1" value="shanghai" />
              <el-option label="Zone No.2" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="所在地址" :label-width="formLabelWidth">
            <el-input
              v-model="form.name"
              autocomplete="off"
              placeholder="请输入身份证号"
            />
          </el-form-item>
        </el-form>
        <h1>服务信息</h1>
        <el-form :model="form">
          <div style="display:flex">
            <el-form-item label="服务编号" :label-width="formLabelWidth">
              <el-input
                v-model="form.name"
                autocomplete="off"
                placeholder="2019009091"
              />
            </el-form-item>
            <el-form-item label="服务机构" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="请选择服务机构">
                <el-option label="Zone No.1" value="shanghai" />
                <el-option label="Zone No.2" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item label="请选择服务团队" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="请选择服务团队">
                <el-option label="Zone No.1" value="shanghai" />
                <el-option label="Zone No.2" value="beijing" />
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="请选择服务医生" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择服务医生">
              <el-option label="Zone No.1" value="shanghai" />
              <el-option label="Zone No.2" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="请选择服务包" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择服务包">
              <el-option label="Zone No.1" value="shanghai" />
              <el-option label="Zone No.2" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="请选择服务项目" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择服务项目">
              <el-option label="Zone No.1" value="shanghai" />
              <el-option label="Zone No.2" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="请输入服务时间" :label-width="formLabelWidth">
            <el-input
              v-model="form.name"
              autocomplete="off"
              placeholder="请输入服务时间"
            />
          </el-form-item>
          <el-form-item label="请选择居民标签" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择居民标签">
              <el-option label="Zone No.1" value="shanghai" />
              <el-option label="Zone No.2" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="所在地址" :label-width="formLabelWidth">
            <el-input
              v-model="form.name"
              autocomplete="off"
              placeholder="请输入身份证号"
            />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script setup>
import { ref, onMounted, reactive } from "vue";
import { ElTable, ElMessageBox } from "element-plus";
import axios from "axios";
import request from "@/request";

let ebooks1 = reactive({
  books: [],
});
let getDate = () => {
  axios.get("http://localhost:3461/api/serve").then((res) => {
    // console.log(res.data.data);
    ebooks1.books = res.data.data;
    console.log(ebooks1.books, "156");
  });
};
onMounted(() => {
  getDate();
});

// 当前页
let pages = ref(1);
// 每页显示条数
let pageSize = 5;
// 更改页数
let changePage = (page) => {
  console.log(page);
  pages.value = page;
  console.log(pages);
};

const dialogVisible = ref(false);
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const handleClose = (done) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
</script>
  
  <style lang="scss" scoped>
.display {
  display: inline-block;
}

/* 发布单位的最外层框 */
.content_publish_top {
  margin-top: 6px;
  width: 100%;
  background-color: #f0f0f0;
  height: 75vh;
  z-index: 100;
  text-align: center;
}

/* 发布单位 - 发布单位行 */
.content_publish_top_One {
  text-align: left;
  width: 95%;
  /* padding: 15px; */
  background-color: white;
  margin-top: 25px;
  display: inline-block;
}

.content_b {
  margin-right: 20px;
}

.span {
  padding: 5px 20px;
  font-weight: 550;
  color: #6e6e6e;
}

.content_One {
  padding: 18px 0;
  margin: 0 25px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>